<template>
	<view>
		<view v-if="hasLogin">
			<!-- 顶部导航 -->
			<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
				<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(grid.id)">
					<view class="text" :class="[grid.id==status?'on':'']">{{grid.name}}</view>
				</view>
			</view>
			<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
			<view class="order-list">
				<view class="list">
					<view class="onorder" v-if="orderList.length==0">
						<view class="iconfont icon-meiyouxiangguanshuju"></view>
						<view class="text">
							没有相关订单
						</view>
					</view>
					<view class="row" v-for="(row,index) in orderList" :key="index" @click="toInfo(row.id)">
						<view class="row-top">
							<view class="l">订单号: {{row.code}}</view>
							<view class="iconfont icon-left"></view>
						</view>
						<view class="row-top2">下单时间: {{row.colectionDate}} {{row.collectionTime}}</view>
						<view class="row-top2">地址: {{row.collectionAddress}}</view>
						<view class="row-top2">联系人: {{row.contact}}{{row.telphone}}</view>
					</view>
				</view>
			</view>
		</view>
		<navigator url="../login/login" hover-class="none" v-else class="toLogin">
			去登录
		</navigator>
		<u-loading :visible="loading"></u-loading>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				status: 0, //
				loading: false,
				headerPosition: "fixed",
				headerTop: "0px",
				orderType: [{
						name: '待支付',
						id: 0,
					}, {
						name: '已支付',
						id: 1,
					}, {
						name: '已取消',
						id: 2,
					}
				],
				//订单列表 演示数据
				orderList: [],
				tabbarIndex: 0
			};
		},
		onLoad(option) {
			if (this.hasLogin) {
				this.loading = true;
				this.getOrderList();
			}
			//兼容H5下排序栏位置
			// #ifdef H5
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
		},
		onPageScroll(e) {
			return;
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
		},
		watch: {
			hasLogin: {
				handler(newValue, oldValue) {
					if (newValue) {
						this.loading = true;
						this.getOrderList();
					} else {
						this.loading = false;
					}
				},
				immediate: true
			}
		},
		computed:{
			...mapState(['hasLogin'])
		},
		methods: {
			//tab跳转
			showType(tbIndex) {
				this.status = tbIndex;
				this.loading = true;
				this.getOrderList();
			},
			//获取订单数据
			getOrderList() {
				let data = {
					status: this.status
				}
				this.$api.OrderList(data).then(res => {
					setTimeout(() => {
						this.loading = false;
						this.orderList = res.data;
					}, 500)
				});
			},
			//跳转详细
			toInfo(id) {
				uni.navigateTo({
					url: `order_info?id=${id}`
				})
			},
			cancelOrder(row) {
				uni.showModal({
					title: '取消订单',
					content: '确定取消此订单？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.doCancelOrder(row.ordersn);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.toLogin {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
		color: #666;
	}

	.topTabBar {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #f8f8f8;
		height: 80upx;
		display: flex;
		justify-content: space-around;

		.grid {
			width: 20%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #444;
			font-size: 28upx;

			.text {
				height: 76upx;
				display: flex;
				align-items: center;

				&.on {
					color: #f06c7a;
					border-bottom: solid 4upx #f06c7a;
				}
			}

		}
	}

	.order-list {
		margin-top: 80upx;
		padding-top: 20upx;
		width: 100%;

		.list {
			width: 94%;
			margin: 0 auto;

			.onorder {
				width: 100%;
				height: calc(100vh - 200upx);
				display: flex;
				justify-content: center;
				align-content: center;
				flex-wrap: wrap;

				.iconfont {
					font-size: 100upx;
					color: #999;
				}

				.text {
					width: 100%;
					height: 60upx;
					font-size: 28upx;
					color: #444;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.row {
				width: 100%;
				padding: 0 20upx 20upx;
				border-radius: 10upx;
				background-color: #fff;
				margin-bottom: 20upx;

				.row-top {
					.l{
						font-size: 28upx;
						font-weight: 500;
						color: #ec652f;
						flex: auto;
					}
					.iconfont{
						font-size: 20upx;
						color: #ddd;
					}
					height: 80upx;
					display: flex;
					align-items: center;
					border-bottom: 1upx solid #e7e7e7;
				}
				.row-top2 {
					font-size: 26upx;
					color: #333;
					height: 60upx;
					display: flex;
					align-items: center;
				}

				
			}
		}
	}
</style>
